import { VFC, CSSProperties } from "react";
import style from './services.module.less';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
import { LazyImage, RcIf, RcClass } from 'zw-components';
const gitlabSrc = require('./assets/gitlab.png');
const redisSrc = require('./assets/redis.png');
const dockerSrc = require('./assets/docker.png');
// const giteeSrc = require('./assets/gitee.png');
const jenkinsSrc = require('./assets/jenkins.png');
const xunlei = require('./assets/xunlei.png')
const src = "https://images.pexels.com/photos/9336604/pexels-photo-9336604.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260";
export const Services: VFC = (props) => {
    const _style: CSSProperties = {
        height: "inherit",
        width: 'inherit'
    }
    const mySrvs = [
        {src: gitlabSrc, statue: true},
        {src: dockerSrc, statue: false},
        {src: jenkinsSrc, statue: true},
        {src: xunlei, statue: true}
    ];
    return (
        <div className={style.container}>
            {mySrvs.map(item => {
                return (
                    <div key={item.src} className={style.servicBolck}>
                        <LazyImage src={item.src} style={_style}/>
                        <RcClass className={style.status} cls={{[style.runing]: item.statue, [style.stop]: !item.statue}}>
                            <div>
                                <RcIf value={item.statue} else={<CloseOutlined />}>
                                    <CheckOutlined />
                                </RcIf>
                            </div>
                        </RcClass>
                    </div>
                );
            })}
        </div>
    );
}